<template>
  <!-- 自定义指标选项 -->
  <div class="custom-indicator">
    <el-popover trigger="click" popper-class="xz-popover indic-popover" width="640" placement="bottom-start" v-model="indicatorShow" @show="showHandler">
      <div class="indic-options">
        <div class="tips"> 注：最多选择4个指标进行查看，至少选择1个指标</div>
        <el-checkbox-group v-model="indicators">
          <div class="indic-group" v-for="item in options" :key="item.value">
            <div class="group-label">{{item.label}}：</div>
            <div class="indic-checkbox">
              <el-checkbox v-for="it in item.children.filter(t=>!excludes.includes(t.label))" :label="it.value" :key="it.value">{{it.label}}</el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
        <div class="btns">
          <el-button size="small" @click="cancelIndicator">取消</el-button>
          <el-button :disabled="btnDisabled" type="primary" size="small" @click="saveIndicator">确定</el-button>
        </div>
      </div>
      <el-button size="small" class="label" icon="el-icon-setting" slot="reference">自定义指标</el-button>
    </el-popover>
  </div>
</template>

<script type="text/javascript">
import { INDICATORS, EXINDICATORS } from '../constant'
export default {
  name: 'CustomIndicator',
  components: {

  },
  props: {
    value: {
      type: Array,
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      indicators: [],
      indicatorShow: false,
      excludes: EXINDICATORS
    }
  },
  methods: {
    showHandler () {
      this.indicators = this.value.slice()
    },
    cancelIndicator () {
      this.indicatorShow = false
    },
    saveIndicator () {
      const value = this.indicators
      // 排序映射
      const orderMap = this.options.reduce((map, item) => {
        Array.isArray(item.children) && item.children.forEach(it => {
          map[it.value] = INDICATORS.findIndex(label => it.label === label)
        })
        return map
      }, {})
      value.sort((a, b) => orderMap[a] - orderMap[b])
      this.$emit('input', value)
      this.$emit('change', value)
      this.cancelIndicator()
    }
  },
  computed: {
    btnDisabled () {
      const len = this.indicators.length
      return len < 1 || len > 4
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-indicator {
}
</style>

<style lang="scss">
.el-popper.indic-popover {
  .indic-options {
    .tips {
      color: #fc6772;
      margin-bottom: 8px;
    }
    .indic-group {
      display: flex;
      line-height: 2;
      margin-bottom: 10px;
      .group-label {
        flex: 70px 0 0;
        font-size: 14px;
      }
      .indic-checkbox {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .el-checkbox {
          width: 136px;
          margin-right: 0;
        }
      }
    }
    .btns {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
